<template>
  <el-dialog
    :visible.sync="$attrs.visable"
    width="1000px"
    :before-close="handleClose"
    append-to-body
    class="dialog_nopadd"
  >
    <template slot="title">
      <span class="f-15">邀请情况</span>
      <span class="f-12 c_999">测试群</span>
    </template>
    <div class="h_box flex">
      <div class="boxleft h_full">
        <div class="boxheader flexbetween">
          <el-input
            placeholder="搜邀请人/编号"
            v-model="queryParams.keyword"
            size="small"
            @keyup.enter.native="handleQuery"
          >
            <el-button
              slot="append"
              size="small"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </div>
        <div class="boxbody">
          <div
            class="groupitem flex aligncenter commhover"
            v-for="(item, index) in grouplist"
            :key="index"
            :class="{ active: active == item.id }"
          >
            <img
              src="https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0"
              alt=""
              class="avatar mr-12"
            />
            <div class="itemcontent">
              <div class="c_text f-14 textover" style="line-height: 1.5715">
                测试群
              </div>
              <div class="c_text3 f-12 textover">编号：1688858403534926</div>
            </div>
          </div>
        </div>
      </div>
      <div class="boxtable">
        <div class="pb-16 flexbetween">
          <el-form
            :model="tableParams"
            ref="queryForm"
            size="small"
            :inline="true"
          >
            <el-form-item label="" prop="userName" class="mb-0">
              <el-input
                v-model="tableParams.userName"
                placeholder="管理员工"
                clearable
                style="width: 220px"
                @keyup.enter.native="handleQuerytable"
              >
                <el-button
                  slot="append"
                  size="small"
                  icon="el-icon-search"
                ></el-button>
              </el-input>
            </el-form-item>
            <el-form-item prop="status" class="mb-0">
              <el-select
                v-model="tableParams.status"
                @change="handleQuerytable"
                style="width: 100px"
                placeholder="选择状态"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="flex aligncenter mb-0">
            <el-button
              :disabled="multiple"
              type="primary"
              size="small"
              class="f-14 f14btn ml-8"
              @click="handleOpenGroup"
              >刷新群成员信息</el-button
            >
            <el-button
              :disabled="multiple"
              plain
              size="small"
              class="f-14 f14btn"
              @click="handleDelete"
            >
              <svg-icon class-name="mr-10 f-12" icon-class="iexport" />
              导出数据
            </el-button>
          </div>
        </div>
        <el-table
          v-loading="loading"
          class="commtable w-full"
          :data="tableList"
        >
          <el-table-column label="群成员" min-width="200px" prop="userName">
            <template slot-scope="scope">
              <div class="flex">
                <img
                  src="https://wework.qpic.cn/wwpic3az/472059_fDikGmxURW66p1D_1701391824/0"
                  alt=""
                  class="iavatar"
                />
                <div class="ml-12">
                  <div class="c_222333 accounttext">
                    {{ scope.row.username }}
                  </div>
                  <div class="c_f90 mt-4 accounttext">19911383351@888</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="在群状态" prop="phonenumber" min-width="130">
            <template slot-scope="scope">
              <span class="dot bg_888999"></span>
              <span class="c_888999">{{ scope.row.status || "状态" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="进群时间"
            min-width="130"
            prop="phonenumber"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.num || 0 }} / {{ scope.row.num || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="退群时间"
            prop="phonenumber"
            min-width="130"
            :show-overflow-tooltip="true"
          />
        </el-table>
        <pagination
          class="mt-0"
          v-show="total > 0"
          :total="total"
          :page.sync="tableParams.pageNum"
          :limit.sync="tableParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="danger" @click="handleSubmit"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        keyword: "",
      },
      active: 1,
      grouplist: [
        { id: 1, name: "测试群", checked: false },
        { id: 2, name: "测试群", checked: true },
      ],
      statusOptions: [
        { id: 1, name: "在群" },
        { id: 2, name: "不在群" },
      ],
      tableParams:{
        keyword:'',
        status:'',
        pageNum:1,
        pageSize:10
      },
      total:0
    };
  },
  props: {},
  created() {},
  methods: {
    handleClose() {
      this.$emit("close"); //关闭弹窗;
    },

    handleQuery() {},

    handlecheck(item) {
      console.log("item");
      this.grouplist.forEach((i) => {
        if (i.id == item.id) {
          i.checked = true;
        } else {
          i.checked = false;
        }
      });
      console.log("this.grouplist:", this.grouplist);
    },

    getList(){

    },

    /** 搜索按钮操作 */
    handleQuerytable() {
      this.tableParams.pageNum = 1;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.h_box {
  height: 600px;
}
.boxleft {
  width: 260px;
  border-right: 1px solid #e9e9e9;
}
.boxtable {
  padding: 16px 16px 0 16px;
  width: calc(100% - 260px);
}
.boxheader {
  padding: 16px;
  // height: 42px;
  position: sticky;
  top: 0;
  z-index: 11;
}
::v-deep .el-input-group__append {
  background-color: #fff;
  padding: 0 15px;
}
.boxbody {
  height: calc(100% - 68px);
  overflow-y: auto;
  padding: 0 16px;
}
.groupitem {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  &.active {
    background-color: #ebf2ff;
  }
  &:hover {
    background-color: #f0f0f0;
  }
  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 4px;
  }
  .itemcontent {
    width: calc(100% - 42px);
  }
  .g_name {
    width: 90%;
  }
}
.commtable{
  // margin: 0 16px;
}
</style>